(function () {
    let init = echarts.init(document.querySelector('#Distributed'));
    let option = {
        color: ['#f9ba33', '#24b6c0', '#66c59d', '#3993d8'],
        title: [
            {
                text: 'xxx数值', right: '5%', top: '16%', textStyle: {fontSize: 16, color: '#FFFFFF'},
                subtext: '18239', subtextStyle: {fontSize: 24, color: '#d21f1f'}
            },
            {
                text: 'xxx数值', right: '5%', top: '40%', textStyle: {fontSize: 16, color: '#FFFFFF'},
                subtext: '18239', subtextStyle: {fontSize: 24, color: '#d21f1f'}
            },
            {
                text: 'xxx数值', right: '5%', top: '64%', textStyle: {fontSize: 16, color: '#FFFFFF'},
                subtext: '18239', subtextStyle: {fontSize: 24, color: '#d21f1f'}
            }],
        grid: [
            {gridIndex: 0, top: '50%', bottom: '10%', left: '5%', right: '80%'},
            {gridIndex: 1, top: '50%', bottom: '10%', left: '15%', right: '70%'},
            {gridIndex: 2, top: '75%', bottom: '10%', left: '25%', right: '60%'},
            {gridIndex: 3, top: '50%', bottom: '10%', left: '35%', right: '50%'}
        ],
        legend: [{
            // 距离容器10%
            top: '30px',
            left: '10px',
            // 修饰图例文字的颜色
            textStyle: {
                color: "rgba(255,255,255,0.7)",
                fontSize: 12
            },
            icon: 'roundRect',
            itemGap: 2,

            itemWidth: 15,// 标志图形的长度
            itemHeight: 15,// 标志图形的宽度
            align: 'left'
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
        }],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: [
            {gridIndex: 0,axisLabel: {show: false}, axisTick: {show: false}, axisLine: {show: false}, splitLine: {show: false}},
            {
                gridIndex: 1,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            },
            {
                gridIndex: 2,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            },
            {
                gridIndex: 3,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {gridIndex: 0,axisLabel: {show: false}, axisTick: {show: false}, axisLine: {show: false}, splitLine: {show: false}},
            {
                gridIndex: 1,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            },
            {
                gridIndex: 2,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            },
            {
                gridIndex: 3,
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            }
        ],
        series: [
            {
                name: 'name1',
                xAxisIndex: 0,
                yAxisIndex: 0,
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    textStyle: {
                        fontSize: 14
                    }
                },
                type: 'pictorialBar',
                barCategoryGap: '-120%',
                // symbol: 'path://M0,10    L10,10 L5,0 L0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 1
                }, emphasis: {itemStyle: {opacity: 0.5}}, data: [60], z: 10
            }, {
                name: 'name2',
                xAxisIndex: 1,
                yAxisIndex: 1,
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    textStyle: {
                        fontSize: 14
                    }
                },
                type: 'pictorialBar',
                barCategoryGap: '-120%',
                // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 1
                }, emphasis: {itemStyle: {opacity: 0.5}}, data: [60], z: 10
            }, {
                name: 'name3',
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    textStyle: {
                        fontSize: 14
                    }
                },
                type: 'pictorialBar',
                barCategoryGap: '-120%',
                // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 1
                }, emphasis: {itemStyle: {opacity: 0.5}}, data: [60], z: 10
            },
            // {
            //     name: 'name4',
            //     xAxisIndex: 3,
            //     yAxisIndex: 3,
            //     label: {
            //         show: true,
            //         position: 'top',
            //         formatter: '{c}%'
            //     },
            //     type: 'pictorialBar',
            //     barCategoryGap: '-120%',
            //     // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            //     symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            //     itemStyle: {
            //         opacity: 1
            //     }, emphasis: {itemStyle: {opacity: 0.5}}, data: [60], z: 10
            // }
        ]
    }
    let fontChange = function (baseSize) {
        option.legend[0].textStyle.fontSize = Number((0.57 * baseSize).toFixed(0));
        option.series[0].label.textStyle.fontSize = Number((0.871 * baseSize).toFixed(0));
        option.series[1].label.textStyle.fontSize = Number((0.871 * baseSize).toFixed(0));
        option.series[2].label.textStyle.fontSize = Number((0.871 * baseSize).toFixed(0));
        for (let i = 0; i < 3; i++) {
            option.title[i].textStyle.fontSize = Number((0.7 * baseSize).toFixed(0));
            option.title[i].subtextStyle.fontSize = Number((1 * baseSize).toFixed(0));
        }

        return option;
    }
    resizeCallBack.push({chart: init, fontChange: fontChange})
    let updateFun = function (data) {
        for (let i = 0; i < 3; i++) {
            let subtext = data[i].value;
            let text = data[i].name.substring(0,5) + '超限数量';
            if (subtext - 0 === 0) {
                text = '';
                subtext = '';
            }
            option.title[i].text = text;
            option.title[i].subtext = subtext;
        }
        let max = data[0].per || 20;
        for (let i = 0; i < 3; i++) {
            if (i !== 0) {
                let top = Number(50 + (50 - (50 * (data[i].per / max))))
                if (top > 85) {
                    top = 85;
                }
                option.grid[i].top = top.toFixed(0) + '%';
            }
            option.series[i].label.formatter = data[i].per + '%';
            option.series[i].data = [data[i].per];
            option.series[i].name = data[i].name;
        }
        // let noZero = 0;
        // for (let i = 0; i < 4; i++) {
        //     if (option.series[i].data[0] === 0) {
        //         noZero = i;
        //         break;
        //     }
        // }
        // option.series = option.series.splice(0, noZero);
        init.setOption(option);
    };
    if (charts1) {
        charts1['13'] = updateFun;
    }
})()